<template>
  <div class="content">
    <div id="map_container"></div>
    <div class="top-bar">
      <div>
        <label for="">区域</label>
        <select name="" id="" v-model="selectRegion">
          <option value="all">ALL</option>
          <option v-bind:value="item.value" v-for="item in region" :key="item.index">{{item.name}}</option>
        </select>
      </div>
      <div>
        <label for="">厂家</label>
        <select name="" id="" v-model="selectVagency" >
          <option value="all">ALL</option>
          <option v-bind:value="item.value" v-for="item in vagency" :key="item.index">{{item.name}}</option>
        </select>
      </div>
      <div>
        <label for="">状态</label>
        <select name="" id="" v-model="selectStatus">
          <option value="all">ALL</option>
          <option value="1">在线</option>
          <option value="0">离线</option>
        </select>
      </div>
      <div :style="{position:'relative'}">
        <label for="">名称</label>
        <input type="text" v-model="selectName" @focus="handleFocus=true" @blur="handleFocus=false">
        <ul class="name-list" v-show="handleFocus">
          <li :title="item.name" v-for="item in selectPoints" :key="item.id" @mousedown="selectName=item.name">{{item.name}}</li>
        </ul>
      </div>
      <div>
        <button><i class="fa fa-search" aria-hidden="true"></i></button>
      </div>
    </div>
    <div class="flow-card">
      <div class="total-site">
        <p> 站点总数</p>
        <p><i class="fa fa-tint" aria-hidden="true"></i>665</p>
      </div>
      <div class="detail-site">
        <div>
          <p><i aria-hidden="true" class="fa fa-check-circle"></i> 在线</p>
          <p>664</p>
        </div>
        <div>
          <p><i aria-hidden="true" class="fa fa-exclamation-triangle"></i> 离线</p>
          <p>1</p>
        </div>
        <div>
          <p><i aria-hidden="true" class="fa fa-wifi"></i> 在线合格率</p>
          <p>99.9%</p>
        </div>
      </div>
      <div class="detail-site">
        <div>
          <p><i aria-hidden="true" class="fa fa-check-circle"></i> 水质达标站点</p>
          <p>664</p>
        </div>
        <div>
          <p><i aria-hidden="true" class="fa fa-paper-plane-o"></i> 水质达标率</p>
          <p>99.9%</p>
        </div>
      </div>
      <div class="detail-site">
        <div>
          <p><i aria-hidden="true" class="fa fa-check-circle"></i> 昨日总处理水量</p>
          <p>5123吨</p>
        </div>
        <div>
          <p><i aria-hidden="true" class="fa fa-paper-plane-o"></i> 处理成本</p>
          <p>0.67kWh/吨</p>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
  import mapArea from '../../../../static/maparea'
  export default {
    name: 'waterMain',
    data () {
      return {
        map:null,
        label: [
          {name:'许村', point:'120.38178,30.441491', data:'125'},
          {name:'长安', point:'120.455944,30.448963', data:'125'},
          {name:'周王庙', point:'120.513436,30.454443', data:'125'},
          {name:'盐官', point:'120.570352,30.446971', data:'125'},
          {name:'斜桥', point:'120.61922,30.503245', data:'125'},
          {name:'海昌', point:'120.707182,30.565954', data:'125'},
          {name:'海州', point:'120.683036,30.522161', data:'125'},
          {name:'硖石', point:'120.742827,30.510712', data:'125'},
          {name:'马桥', point:'120.714081,30.469385', data:'125'},
          {name:'丁桥', point:'120.674987,30.424552', data:'125'},
          {name:'袁花', point:'120.784221,30.420067', data:'125'},
          {name:'尖山', point:'120.784796,30.323851', data:'125'},
        ],
        vagency: [
          {name:"商达",value:'150'},
          {name:"宏电",value:'151'},
          {name:"通和",value:'152'},
          {name:"科威",value:'153'},
          {name:"汀滢",value:'154'},
          {name:"领先",value:'155'},
          {name:"中人",value:'156'},
          {name:"卓锦",value:'160'},
          {name:"清之源",value:'161'},
          {name:"一环",value:'180'}
        ],
        region:[
          {name:"武原镇",value:"330424100"},
          {name:"硖石街道",value:"330481001"},
          {name:"海洲街道",value:"330481002"},
          {name:"马桥街道",value:"330481004"},
          {name:"许村镇",value:"330481101"},
          {name:"长安镇(高新区)",value:"330481103"},
          {name:"周王庙镇",value:"330481105"},
          {name:"丁桥镇",value:"330481106"},
          {name:"斜桥镇",value:"330481107"},
          {name:"盐官镇",value:"330481110"},
          {name:"袁花镇",value:"330481112"},
          {name:"尖山新区(黄湾镇)",value:"330481400"}
        ],
        selectVagency: 'all',
        selectRegion: 'all',
        selectStatus: 'all',
        selectName: '',
        handleFocus: false,
        allPoints:[],
        onlineCount: 0,
        cardData:{}
      }
    },
    computed: {
      selectPoints: function () {
        if (this.selectVagency!=='all'||this.selectRegion!=='all'||this.selectStatus!=='all'||this.selectName!=='') {
          let _arr = this.allPoints
          if (this.selectVagency!=='all') {
            _arr = _arr.filter( (p) => {
              return p.vAgency === this.selectVagency
            })
          }
          if (this.selectRegion!=='all') {
            _arr = _arr.filter( (p) => {
              return p.town === this.selectRegion
            })
          }
          if (this.selectStatus!=='all') {
            _arr = _arr.filter( (p) => {
              return p.status === this.selectStatus
            })
          }
          if (this.selectName!=='') {
            _arr = _arr.filter( (p) => {
              return p.name.includes(this.selectName) === true
            })
          }
          return _arr
        } else {
          return this.allPoints
        }
      }
    },
    watch: {
      selectPoints: function (n,o) {
        this.updatePoint()
      }
    },
    mounted: function () {
      this.initMap()
      // console.log(mapArea)
      this.getData()
      // this.drawALL(mapArea)
    },
    methods: {
      initMap: function () {
        this.map = new BMap.Map("map_container",{enableMapClick:false},{
          enableHighResolution: true //是否开启高清
        });
        this.map.centerAndZoom(new BMap.Point(120.5837765,30.4487005), 12);
        this.map.enableInertialDragging(); //开启关系拖拽
        this.map.enableScrollWheelZoom();  //开启鼠标滚动缩放
        //创建鱼骨控件
        var navCtrl = new BMap.NavigationControl({
          anchor: BMAP_ANCHOR_BOTTOM_LEFT //设置鱼骨控件的位置
        });
        // 将鱼骨添加到地图当中
        this.map.addControl(navCtrl);
      },
      getData: function () {
        this.$http('/vqdisplay/epindex/stations')
        .then( response=> {
          console.log(response)
          this.allPoints = response.data.body.data
          this.showPoints(this.selectPoints)
          let _online = this.allPoints.filter( p=>{
            return p.status === '1'
          })
          this.onlineCount = _online.length
        })
        .catch( error=>{
          console.log(error)
        })
        this.$http('/vqdisplay/epindex/wholedata')
        .then( (response)=> {
          this.cardData = response.data.body.data
        })
      },
      updatePoint: function () {
        this.map.clearOverlays();
        // this.drawALL(mapArea)
        this.showPoints(this.selectPoints)
        this.setViewport(this.selectPoints)
      },
      drawArea: function (data,color) {
        var areaPoints = []
        for (var i=data.length-1; i>=0;i--) {
          let _p = new BMap.Point(data[i].lng,data[i].lat);
				  areaPoints.push(_p)
        }
        let polygon = new BMap.Polygon(areaPoints, {strokeColor:"#fff",fillColor: color, strokeWeight:2, strokeOpacity: 1,fillOpacity: .75}); 
        
        this.map.addOverlay(polygon);
      },
      drawALL: function (area_obj) {
        var color = {xucun:'#f85f73',changan:'#ffeaa5',zhouwangmiao:'#aef4a4',yanguan:'#7971ea',xieqiao:'#ffa258',haichang:'#a02a63',haizhou:'#cfee91',xiashi:'#e7759a',maqiao:'#91ceff',dingqiao:'#f8d5f0',yuanhua:'#75c2f6',jianshan:'#35b0ab'}
        for (var j in area_obj) {
          this.drawArea(area_obj[j],color[j])
        }
        // this.drawLabel()
      },
      drawLabel () {
        this.label.forEach((item)=> {
				 var point = new BMap.Point(item.point.split(',')[0], item.point.split(',')[1])
				 var label = new BMap.Label(
						item.name + "<br>" + item.data,
						{
							position: point,
							offset: new BMap.Size(-20, -20)
						}
					)
					label.setStyle({
						color : "#fff",
						textShadow: "0px 1px 2px rgba(0, 0, 0, .25)",
						fontWeight: "700",
						fontSize : "14px",
						border : "none",
						background: "transparent",
						lineHeight : "20px",
						fontFamily:"微软雅黑",
						textAlign: "center",
          });
				  this.map.addOverlay(label)
			  });
      },
      showPoints: function (item) {
        //添加点
        var myIcon = new BMap.Icon("/vqdisplay/static/points.png", new BMap.Size(40,40));
        for(var i=item.length-1;i>=0;i--){
          var point = new BMap.Point(item[i].east,item[i].north);
          var marker = new BMap.Marker(point,{icon:myIcon});
          this.map.addOverlay(marker);
        }	
      },
      setViewport: function (item) {
        var points = [];
        for (var i=item.length-1; i>0; i--) {
          var point = new BMap.Point(item[i].east,item[i].north);
          points.push(point);
        }
        var viewport  = this.map.getViewport(points);
        this.map.centerAndZoom(viewport.center, viewport.zoom);
      }
    }
  }
</script>

<style scoped>
  body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
  #map_container {height:100vh; width: 100%;}
  #control{width:100%;}
  .content {
    width: 100%;
    position: absolute;
    height: 100vh
  }
  .top-bar {
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    background-color: rgba(255,255,255,.85);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
    display: flex;
    color: #000;
    align-items: center;
    justify-content: center;
    font-size: 14px;
  }
  .top-bar > div {
    padding: 0 20px;  
  }
  .top-bar select, .top-bar input {
    min-width: 140px;
    min-height: 30px;
    border: none;
    background-color: #efefef;
    padding: 4px;
    font-family: 'Microsoft YaHei';
    outline: none;
    border-radius: 4px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, .1) inset;
  }
  .top-bar button {
    min-width: 48px;
    min-height: 30px;
    border: none;
    outline: none;
    border-radius: 4px;
    color: #fff;
    background-color: #459df5;
    box-shadow: 0 2px 4px rgba(14, 80, 146, .35)
  }
  .flow-card {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 360px;
    height: 444px;
    background-color: rgba(255,255,255,.85);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
    border-radius: 4px;
    color: #000;
  }
  .flow-card > div {
    width: 100%;
    height: 25%;
  }
  .flow-card p {
    text-align: center;
  }
  .total-site > p:nth-child(2) {
    margin: 0;
    font-size: 40px;
  }
  .detail-site {
    display: flex;
    justify-content: space-around;
  }
  .total-site i {
    color: #459df5;
  }
  .detail-site > div:nth-child(1) i {
    color: #0cc85e;
  }
  .detail-site > div:nth-child(2) i {
    color: #ff8138;
  }
  .detail-site > div:nth-child(3) i {
    color: #999;
  }
  .detail-site > div > p:nth-child(1) {
    font-size: 14px;
  }
  .detail-site > div > p:nth-child(2) {
    margin: 0;
    font-size: 30px;
    font-weight: 100;
    letter-spacing: 2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  }
  .name-list {
    position: absolute;
    top: 17px;
    left: 52px;
    width: 162px;
    max-height: 200px;
    overflow-x: hidden;
    white-space:nowrap;
    text-overflow:ellipse;
    overflow-y: auto;
    background-color: rgba(255,255,255,.85);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
    border-radius: 4px;
    list-style: none;
    padding: 0;
  }
  .name-list li {
    height: 30px;
    line-height: 30px;
    padding: 0 4px;
    cursor: default;
  }
  .name-list li:hover {
    background-color: #459df5;
    color: #fff;
  }
</style>